---
title: Meteors
date: 2023-07-13
description: A meteor shower effect.
author: nyxb
published: true
video: https://cdn.nyxbui.design/meteors.mp4
---

<ComponentPreview name="meteors-demo" />


### Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyxb@latest add meteors
```

</TabsContent>

<TabsContent value="manual">

<Steps>

Copy and paste the following code into your project.

```ts
// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      animation: {
        meteor: "meteor 5s linear infinite",
      },
      keyframes: {
        meteor: {
          "0%": { transform: "rotate(215deg) translateX(0)", opacity: 1 },
          "70%": { opacity: 1 },
          "100%": {
            transform: "rotate(215deg) translateX(-500px)",
            opacity: 0,
          },
        },
      },
    },
  },
};
```

```text
components/ui/meteors.tsx
```

<ComponentSource name="meteors" />

</Steps>

</TabsContent>

</Tabs>

## Props

### Meteors

| Prop   | Type   | Description       | Default |
| ------ | ------ | ----------------- | ------- |
| number | number | Number of meteors | 20      |
